<template>
  <div class="container">
    <el-card>
      <table>
        <el-input
          v-model.trim="registerUsername"
          style="width: 240px"
          placeholder="账号名/手机号/邮箱"
          class="username-input"
        /><br />
        <!-- 密码 -->
        <el-input
          v-model.trim="registerPassword"
          style="width: 240px"
          type="password"
          placeholder="密码(至少6位)"
          show-password
          class="password-input"
        /><br />
        <!-- 确认密码 -->
        <el-input
          v-model.trim="registerConfirmPassword"
          style="width: 240px"
          type="password"
          placeholder="再次输入密码"
          show-password
          class="password-input"
          @keyup.enter="handleRegister"
        /><br />
        <!-- 注册按钮 -->
        <el-button
          type="primary"
          style="width: 100%"
          class="login-btn"
          @click="handleRegister"
          >注册</el-button
        ><br />
        <slot></slot>
      </table>
    </el-card>
  </div>
</template>

<script setup>
import { storeToRefs } from 'pinia'
import { useMapgisStore_hjh } from '@/stores/mapgis-hjh'
const mapgisStore_hjh = useMapgisStore_hjh()

const { registerUsername, registerPassword, registerConfirmPassword } = storeToRefs(mapgisStore_hjh)
const { handleRegister } = mapgisStore_hjh

</script>

<style lang="scss" scoped>
.container {
  position: fixed;
  top: 100px;
  left: 50%;
  transform: translateX(-50%);
  width: 380px;
  opacity: 0.95;
  :deep(.el-card__body) {
    padding: 40px 50px 50px 50px;
  }
  table {
    margin: 30px auto;
    text-align: center;
    .username-input {
      margin-bottom: 16px;
    }
    .password-input {
      margin-bottom: 20px;
    }
    .login-btn {
      margin-top: 20px;
      margin-bottom: 10px;
    }
  }
}
</style>
